<template>
  <v-card title="折线图 & markArea">
    <vcu-chart-line :legend-visible="false" v-bind="options" />
  </v-card>
</template>

<script>
export default {
  name: 'settings-markarea',
  data() {
    return {
      options: {
        title: {
          text: '一天用电量分布',
          subtext: '纯属虚构',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '00:00',
            '01:15',
            '02:30',
            '03:45',
            '05:00',
            '06:15',
            '07:30',
            '08:45',
            '10:00',
            '11:15',
            '12:30',
            '13:45',
            '15:00',
            '16:15',
            '17:30',
            '18:45',
            '20:00',
            '21:15',
            '22:30',
            '23:45',
          ],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} W',
          },
          axisPointer: {
            snap: true,
          },
        },
        series: [
          {
            name: '用电量',
            type: 'line',
            smooth: true,
            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
            markArea: {
              data: [
                [
                  {
                    name: '早高峰',
                    xAxis: '07:30',
                  },
                  {
                    xAxis: '10:00',
                  },
                ],
                [
                  {
                    name: '晚高峰',
                    xAxis: '17:30',
                  },
                  {
                    xAxis: '21:15',
                  },
                ],
              ],
            },
          },
        ],
      },
    }
  },
  methods: {},
  created() {},
}
</script>
<style lang="less" scoped>
</style>
